<template>
    <div class="page">
        <div class="pages_con">
            <div class="menuleft">
                <div href="javascript:;" :class="{'active':ind === index}" class="weui-grid" v-for="(item,index) in categorylist" :key="index" @click="goCategory(item,index)">
                    <p class="weui-grid__label">
                        {{item.cateName}}
                    </p>
                </div>
            </div>
            <div class="listbox rt" ref="listbox">
                <div class="menuList" v-if="showMenu">
                    <div :class="['menubox', (index)%2==0?'lf':'rt']" v-for="(item,index) in meunlist" :key="index" @click="goProList(item,index)">
                        <div class="imgBox">
                            <img :src="item.catePicUrl" alt="">
                            <!-- <img src="../../../images/war1.png" /> -->
                        </div>
                        <p class="bold fs14 mt7 mb10">{{item.cateName}}</p>
                    </div>
                </div>
                
                <div class="list textL borderbox p8 mb6 lf br7" v-for="(item,index) in bottomlist" :key="index" v-if="!showMenu" @click="getcate(item)">
                    <!-- <img class="" src="http://img95.699pic.com/photo/50043/2477.jpg_wh860.jpg" /> -->
                    <img :src="item.coverPicUrl" alt="">
                    <p class="fs14 mt5 h20 lh18 w100 ofh ml1">{{item.productName | sliceString(8)}}</p>
                    <span class="price mb5">
                        <span class="fs10">￥</span>{{item.salePrice}}
                    </span>
                    <span class="flex flexCenter pl7 pr7 pt3 pb3 bgR mt7" style="width:50%;" @click.stop="addShopCart(item)">
                        <img src="../../../images/cart2@2x.png" class="mr2 h8 w8" alt="">
                        <span class="fs10 ml2 lh12 mt1 price">添加</span>
                    </span>
                </div>
                <div class="nodata" v-if="showBg">
                    <img src="./../../../assets/noshop.png" alt="">
                    <p class="fontcolor">暂无商品,去看看别的吧</p>
                </div>
                <div style="height:5rem;float:left;width:1rem;"></div>
            </div>
        </div>
        <botNavigation />
    </div>
</template>
<script>
import {
    getproductlist,
    getHomeEightCard,
    querySecondLevelList,
    Shopset,
} from "src/methods/request.js";
import mixins from "mixins";
export default {
    mixins: [mixins],
    data() {
        return {
            categorylist: [],
            bottomlist: [],
            route: {},
            showBg: false,
            ind: "",
            meunlist: [],
            showMenu: false,
            bottomShow: false
        };
    },
    computed: {
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        }
    },
    created() {
        this.$store.commit("increment", "分类");
        this.getCatelist();
        this.getprolist();
    },
    methods: {
        getcate(item) {
            this.$router.push({
                path: "/categoryDetail",
                query: {
                    cateNo: item.productNo
                }
            });
        },
        // 获取组件数据
        goCategory(item, index) {
            this.ind = index;
            if (item.cateNo == "008") {
                this.bottomlist = [];
                this.showMenu = false;
                this.getprolist();
            } else {
                this.showBg = false;
                this.getMenulevel(item.cateNo, item.cateName);
            }
        },
        goProList(item, index) {
            this.bottomlist = [];
            this.getprolist(item.cateNo, item.cateName, "2");
            this.showMenu = false;
        },
        getMenulevel(cateNo, cateName) {
            querySecondLevelList({ parentNo: cateNo || "" })
                .then(response => {
                    this.meunlist = Object.assign(
                        [],
                        response.data.categoryList
                    );
                    // 图片加域名
                    for (var item of this.meunlist) {
                        item.catePicUrl = this.imgUrl + item.catePicUrl;
                    }
                    this.showMenu = true;
                    if (this.meunlist.length == "0") {
                        this.getprolist(cateNo, cateName, "2");
                        this.showMenu = false;
                    }
                })
                .catch(error => console.log(error));
        },
        getprolist(categoryNo, couponNo, type) {
            this.$vux.loading.show({
                text: "Loading"
            });
            getproductlist({
                categoryNo: categoryNo || "008",
                couponNo: couponNo,
                type: type || "2"
            })
                .then(response => {
                    this.bottomlist = Object.assign(
                        [],
                        response.data.productList
                    );
                    // console.log(this.bottomlist)
                    // 图片加域名
                    for (var item of this.bottomlist) {
                        item.coverPicUrl = this.imgUrl + item.coverPicUrl;
                    }
                    this.$vux.loading.hide();
                    this.showBg = this.bottomlist.length == 0
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    this.showBg = true;
                });
        },
        getCatelist() {
            //获取菜品信息
            getHomeEightCard({})
                .then(response => {
                    this.categorylist = Object.assign(
                        [],
                        response.data.categoryList
                    );
                    this.ind = this.categorylist.length - 1;
                    // 图片加域名
                    for (var item of this.categorylist) {
                        item.catePicUrl = this.imgUrl + item.catePicUrl;
                    }
                })
                .catch(error => console.log(error));
        },
        addShopCart(val){
            Shopset({
                productNo: val.productNo,
                isAdd:'01',
                buynum: 1,
                specIds: val.specIds || '',
                selectBox:'true',
            }).then(res=>{
                if(res.rspCode == '0000' && res.data.code == '0000'){
                    this.$Toast()
                    this.$emit('funCB')
                    this.show = false;
                }else{
                    Toast({ message:'添加购物车失败',position:'middle',duration:1500});
                }
            }).catch(err=>console.log(err));
        }
    }
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
 

